<template>
    <u-row>
    <u-col span="3">
      <view class="left">
        <view>
          <view class="button"><text class="iconfont icon-wenzhang"></text></view>
          <view><text>选择题型</text></view>
        </view>
        <view>
          <view class="button"><text class="iconfont icon-wenzhang"></text></view>
          <text>随机一题</text>
        </view>
        <view>
          <view class="button"><text class="iconfont icon-wenzhang"></text></view>
          <text>我的收藏</text>
        </view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="middle">
        <view class="middleLeft">
          <text>顺序练习</text>
          <text>{{}}/{{}}</text>
        </view>
        <view class="middleRight">
          <text>模拟考试</text>
          <text>仿真冲刺</text>
        </view>
      </view>
    </u-col>
    <u-col span="3">
      <view class="right">
        <view>
          <view class="button"><text class="iconfont icon-wenzhang"></text></view>
          <text>专项练习</text>
        </view>
        <view>
          <view class="button"><text class="iconfont icon-wenzhang"></text></view>
          <text>我的错题</text>
        </view>
        <view>
          <view class="button"><text class="iconfont icon-wenzhang"></text></view>
          <text>经验总结</text>
        </view>
      </view>
    </u-col>
  </u-row>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.left,.middle,.right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.left>view,.right>view {
  margin: 2vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.middleLeft,.middleRight {
  width: 13vh;
  height: 13vh;
  border-radius: 50%;
}
.middleLeft{
  background-color: #2b85e4;
}

.middleRight{
  background-color: aquamarine;
}

.right {
}

.button {
  text-align: center;
  height: $xy-component-but;
  width: $xy-component-but;
  line-height: $xy-component-but;
  margin-bottom: 1vh;
  background-color: #2ec;
  border-radius: 50%;
}

.button text {
  font-size: 7.5vw;
}

</style>
